<template>
  <van-list
    v-if="viewLoading"
    v-model="listLoading"
    :finished="listFinished"
    @load="onListLoad"
    style="padding-bottom:50px"
  >
    <van-collapse v-model="collapseActiveName">
      <van-collapse-item v-for="(item, k) in listPager.items" :key="k" :name="item.user_mutually_buy_average.id">
        <div slot="title">{{ configApi.constants.user_mutually_buy_average_status[item.user_mutually_buy_average.status] }}</div>

        <van-row>
          <van-col span="12">编号: </van-col>
          <van-col span="12">{{ item.user_mutually_buy.create_time }}</van-col>
					<van-col span="12">单次: </van-col>
					<van-col span="12">{{ item.user_mutually_buy_average.average_index }}</van-col>
          <van-col span="12">数量: </van-col>
          <van-col span="12">{{ item.user_mutually_buy_average.amount }}</van-col>
          <van-col span="12">创建时间:</van-col>
          <van-col span="12">{{ new Date(item.user_mutually_buy_average.create_time * 1000).toLocaleString() }}</van-col>
          <van-col span="24" v-if="item.user_mutually_buy_average.status=='25'" style="text-align: center;">
              <van-button size="mini" type="primary" style="width:100%">查看信息</van-button>
          </van-col>
          <van-col v-if="item.user_mutually_buy_average.status=='21'" span="24" style="text-align: center;">
            <van-button size="mini" type="primary" style="width:100%" @click="onClickPay(item.user_mutually_buy_average.id)">确认打款</van-button>
          </van-col>
        </van-row>
      </van-collapse-item>
    </van-collapse>
  </van-list>
</template>

<script>
  import { Button, Col, Collapse, CollapseItem, List, Row } from 'vant';
  import { mapState } from 'vuex';
  import userMutuallyBuyApi from '@/api/user/mutually/buy/index';

  export default {
    components: {
      [Button.name]: Button,
      [Col.name]: Col,
      [Collapse.name]: Collapse,
      [CollapseItem.name]: CollapseItem,
      [List.name]: List,
      [Row.name]: Row
    },
    data() {
      return {
        collapseActiveName: [],
        listLoading: false,
        listFinished: false,
        listPager: {
          items: [],
          limit: 10,
          current: 0
        },
        viewLoading: false
      };
    },
    methods: {
      onClickPay(id) {
        this.$router.push({ name: 'mutuallyBuyPay', query: { id: id }});
      },
      onListLoad() {
        if(this.listPager.current > this.listPager.total_pages) {
          this.listFinished = true;
          this.listLoading = false;
          return false;
        }
        this.getList();
      },
      getList() {
        this.listPager.current += 1;
        userMutuallyBuyApi.pagerByToken(this.listPager.limit, this.listPager.current).then((res) => {
          for(let i in res.pager.items) {
            this.listPager.items.push(res.pager.items[i]);
          }

          this.listPager.total_pages = res.pager.total_pages;
          this.listPager.limit = res.pager.limit;
          this.listLoading = false;
        });
      }
    },
    computed: mapState({
      configApi: state => state.configApi,
    }),
    created() {
      this.$store.dispatch('configApi/get').then((res) => {
        if(res.code !== 0) { return false; }
        this.viewLoading = true;
      });

      this.getList();
    }
  }
</script>
